import React from 'react'
import { Row, Col, Form, Input, Button, Icon } from 'antd'

import Layout from '../../components/Layout'
import ContactBg from '../../assets/images/contact_us_bg.jpg'
import ContactQRCode from '../../assets/images/contact_qr_code.jpg'
import style from './index.scss'

class Contact extends React.Component{

    componentDidMount(){
        this.goTop();
        this.createBaiduMap();
    }

    /**
     * 回到顶部
     * */
    goTop = () => {
        document.documentElement ? document.documentElement.scrollTop = 0 : document.body.scrollTop = 0;
    }

    /**
     * 创建百度地图
     * */
    createBaiduMap = () => {
        const { BMap, BMAP_ANIMATION_BOUNCE } = window
        const longitude = 113.1547395150
        const latitude = 23.3642525313
        var map = new BMap.Map("baiduMap");
        map.centerAndZoom(new BMap.Point(longitude, latitude),11);
        map.enableScrollWheelZoom(true);

        // 用经纬度设置地图中心点
        map.clearOverlays();
        var new_point = new BMap.Point(longitude, latitude);
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

        var point = new BMap.Point(longitude,latitude);
        var opts = {
            position : point,    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(-100, -100)    //设置文本偏移量
        }
        var label = new BMap.Label("广东省广州市市花都区花港大道32号", opts);  // 创建文本标注对象
        label.setStyle({
            color : "#000",
            fontSize : "12px",
            height : "20px",
            lineHeight : "5px",
            fontFamily:"微软雅黑",
            border: "1px solid #ccc",
            padding: '20px'
        });
        map.addOverlay(label);
    }

    render() {
        return (
            <Layout>
                <div className={style.contact__banner}>
                    <div className={style.banner__text_box}>
                        <span className={style.banner__text}>联系我们</span>
                        <span className={style.banner__text_e}>Contact us</span>
                    </div>

                    <img className={style.banner__img} src={ContactBg} />
                </div>
                <div className={style.contact__row_outer}>
                    <Row type="flex" className={style.contact__row}>
                        <Col xs={0} sm={0} md={6}>
                            <i className='iconfont_p iconfont icon-dizhi' />
                            <h3>地址</h3>
                            <p>广东省广州市市花都区花港大道32号</p>
                        </Col>
                        <Col xs={0} sm={0} md={6}>
                            <i className='iconfont_p iconfont icon-dianhua' />
                            <h3>电话</h3>
                            <p>15920538035(范先生)</p>
                        </Col>
                        <Col xs={0} sm={0} md={6}>
                            <i className='iconfont_p iconfont icon-email' />
                            <h3>邮箱</h3>
                            <p>3392401300@qq.com</p>
                        </Col>
                        <Col xs={0} sm={0} md={6}>
                            <i className='iconfont_p iconfont icon-lishi' />
                            <h3>工作时间</h3>
                            <p>7*24h/全年无休</p>
                            {/*<p>09:30-12:00 AM ～ 14:00-18:30 PM</p>*/}
                        </Col>
                    </Row>
                    <Row className={style.contact__message_box}>
                        <Col xs={24} sm={24} md={12} className={style.contact__message_col}>
                            <div id="baiduMap" className={style.baiduMap}></div>
                        </Col>
                        <Col xs={24} sm={24} md={12} className={style.contact__message_col}>
                            <Form>
                                <Input.Group>
                                    <p>非常感谢您访问我们的网站！如果您有任何建议与意见，欢迎留言告诉我们。 因为有你相伴，所以才能进步！</p>
                                    <Form.Item>
                                        <Input.TextArea
                                            placeholder="请输入留言:"
                                            prefix={<Icon type="message" style={{color:'rgba(0,0,0,.25)'}}/>}
                                            style={{resize:"none"}}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            placeholder="请输入姓名"
                                            prefix={<Icon type="user" style={{color:'rgba(0,0,0,.25)'}}/>}
                                        />
                                    </Form.Item>
                                    <Form.Item>
                                        <Input
                                            placeholder="请输入手机号"
                                            prefix={<Icon type="phone" style={{color:'rgba(0,0,0,.25)'}}/>}
                                        />
                                    </Form.Item>
                                </Input.Group>
                                <Button type="primary">
                                    留言
                                </Button>
                            </Form>
                        </Col>
                    </Row>
                    <Row>
                        <Col xs={24} sm={24} md={0} className={style.m__contact_info}>
                            <img className={style.qrcode} src={ContactQRCode} />
                            <p>长按保存图片，在微信中扫描识别该二维码</p>
                            <p>
                                <a href="tel:15920538035">
                                    <i className="iconfont_m iconfont icon-dianhua"/>电话：15920538035
                                </a>
                            </p>
                            <p>
                                <a href="mailto:3392401300@qq.com">
                                    <i className="iconfont_m iconfont icon-email"/>邮箱：3392401300@qq.com
                                </a>
                            </p>
                            <p>
                                <a href="#">
                                    <i className="iconfont_m iconfont icon-weibo"/>微博：xxxxxx
                                </a>
                            </p>
                        </Col>
                    </Row>
                </div>
            </Layout>
        );
    }
}

export default Contact
